<template>
  <div class="list" v-infinite-scroll="load">
    <div class="comment-body" v-for="item in data" :key="item.id">
      <el-row :gutter="20" class="comment-main">
        <el-col :span="2" style="text-align: right">
          <el-avatar icon="el-icon-user-solid"></el-avatar>
        </el-col>
        <el-col :span="22" style="line-height: 35px">{{ item.createUser.name }}</el-col>
        <el-col :span="22" :offset="2" class="comment-content">
          <div v-html="formatHtml(item.content)"></div>
        </el-col>
        <el-col :span="22" :offset="2" class="comment-time">
          <span>{{ item.createTime }}</span>
          <span class="reply"  @click="chooseReply(item)"><i class="el-icon-chat-dot-square">回复</i></span>
          <span class="pin" :class="item.isPin?'current':''" @click="$emit('pin',item.id, item.isPin)"><i class="el-icon-paperclip">Pin</i></span>
          <span class="reply" @click="$emit('del',item.id, item.createUser.id)"><i class="el-icon-delete">删除</i></span>
          <span class="reply" @click="$emit('edit',item.id, item.content)"><i class="el-icon-edit">编辑</i></span>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="item.id === commentReplyId">
        <el-col :span="10" offset="2">
          <el-input
            type="textarea"
            ref="commentInput"
            placeholder="回复："
            v-model="replyContent"
            :autosize="{ minRows: 2,maxRows: 2}">
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button size="mini" type="primary" @click="replyConfirm(item)">确认</el-button>
          <el-button size="mini" @click="cancel">取消</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22" :offset="1">
          <cs-comment-reply v-for="item in item.reply" :data="item" :key="item.id" @del="del"></cs-comment-reply>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
import CsCommentReply from "@/components/CsCommentList/compoments/CsCommentReply";
import {createOfferComment} from "@/api/business/offer";

export default {
  name: "CsCommentList",
  components: {
    CsCommentReply
  },
  props: {
    data: {
      type: Array | Object,
    },
    offerId:String,
    refleshPage:Function
  },
  data() {
    return {
      currentReply: null,
      loading: false,
      commentReplyId:'',
      replyContent:''
    }
  },
  methods: {
    chooseReply(comment) {
      this.commentReplyId = comment.id
      // if (this.currentReply === comment) {
      //   this.currentReply = null
      // }
      // else {
        this.currentReply = comment
      // }
      this.$emit('reply', this.currentReply)
    },
   async replyConfirm(comment){
     console.log(this)
      let commentData ={
        offerId:this.offerId,
        content:this.replyContent,
        level:"REPLY",
        id:comment.id
      }
      const {data: res} = await createOfferComment(commentData)
     if (res.code === 200){
       this.$message.success('发布成功')
       this.replyContent = ''
       this.commentReplyId = ''
       this.refleshPage()
     }
    },
    cancel(){
      this.commentReplyId = ''
      this.replyContent = ''
    },
    load() {
      this.$emit('load')
    },
    // 把/n/r替换成换行标签
    formatHtml(origin) {
      return origin.replace(/\n|\r/g, '<br/>')
    },
    del(id, uid) {
      // console.log(id,uid)
      this.$emit('del', id, uid)
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-body {
  margin-bottom: 30px;
  font-size: 14px;

  .comment-main {
    margin-bottom: 10px;
  }

  .comment-time {
    margin-top: 5px;
    color: #C9C9C9;

    * {
      margin-right: 15px;
    }
  }
}

.comment-header {
  display: flex;
  align-items: center;
}

.reply, .pin {
  cursor: pointer;
}

.current {
  color: #00a2ff;
}
</style>
